<template>
  <div class="container">
    <div class="title">快速入门</div>
    <div id="chart" />
  </div>
</template>

<script>
import G6 from '@antv/g6';

const data = {
  nodes: [
    {
      id:    '1',
      label: 'node 1',
      type:  'k-rect',
      
    },
    {
      id:    '2',
      label: 'node 2',
      style: {
        width:  120,
        height: 60,
      },
    },
    {
      id:    '3',
      label: 'node 3',
      size:  [120],
      style: {
        height: 60,
      },
    },
    {
      id:    '4',
      label: 'node 4',
    },
  ],
  edges: [
    {
      source: '1',
      target: '2',
    },
    {
      source: '1',
      target: '3',
    },
    {
      source: '2',
      target: '4',
    },
    {
      source: '3',
      target: '4',
    },
  ],
};

export default {
  name: 'QuickStart5',
  data() {
    return { graph: null };
  },
  mounted() {
    this.createGraph();
  },
  methods: {
    createGraph() {
      this.registerNode(); // 在实例话之前调用
      const graph = new G6.Graph({
        container:    'chart',
        width:        window.innerWidth,
        height:       500,
        enabledStack: true,
        defaultEdge:  {
          style: {
            stroke: 'orange', // 线的颜色
          },
        },
        defaultNode: {
          type:  'rect',
          size:  [100],
          color: 'red', // 边框颜色
          style: {
            fill:      'pink', // 填充色
            lineWidth: 6, // 边框宽度
            stroke:    'blue',
          },
          labelCfg: {
            style: {
              fill:     'white',
              fontSize: 16,
            },
          },
        },
        modes: {
          default: ['drag-node', 'drag-edge', 'zoom-canvas'],
        },
        fitCenter:  true,
        linkCenter: true,
        layout:     {
          type: 'grid',
        },
        renderer: 'svg',
      });

      graph.data(data); // 加载数据
      graph.render(); // 渲染
    },
    registerNode() {
      G6.registerNode('k-rect', {
        draw(cfg, group) { // cfg表示节点的数据  group表示节点分组
          const shape = group.addShape('rect', {
            draggable: true,
            attrs:     {
              x:      0,
              y:      0,
              width:  125,
              height: 40,
              fill:   cfg.style.fill, //填充色
              stroke: '', //边框
              radius: 8,
            },
          });
          // //里面的那层

          group.addShape('rect', {
            draggable: true,
            attrs:     {
              x:      5,
              y:      0,
              width:  120,
              height: 40,
              fill:   '#fff', //填充色
              radius: 6,
            },
          });
          // //文字
          group.addShape('text', {
            attrs: {
              textBaseline: 'middle',
              textAlign:    'center',
              x:            60, // 调整文本的坐标位置  必须要是 宽和高的一般才能居中显示
              y:            20,
              text:         cfg.label,
              fill:         '#000',
            },
          });
          return shape;
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .title {
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: white;
    font-weight: bold;
  }
}
</style>
